<template>
  <div>
    <div class="margin-container-list">
      <!--顶部搜索 -->
      <el-form :inline="true" :model="searchListQuery">
        <el-form-item label="批次名称：">
          <el-input v-model="searchListQuery.printBatchName"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-date-picker
            v-model="timeValue"
            type="datetimerange"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            start-placeholder="创建开始日期"
            end-placeholder="创建结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button plain @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="mar-b-20">
        <el-button plain @click="doBatchDelete">批量解除批次</el-button>
        <el-checkbox v-model="searchListQuery.onlyShowUnPrint" @change="handleSearch" class="mar-l-20">仅显示未打印订单数为0的批次</el-checkbox>
      </div>

      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="dataList" v-loading="listLoading" @selection-change="handleSelectionChange" element-loading-text="加载中" style="width: 100%" >
          <el-table-column width="50px" type="selection"></el-table-column>
          <el-table-column min-width="160px" label="批次名称" prop="printBatchName"></el-table-column>
          <el-table-column width="120px" label="快递公司" prop="expressName"></el-table-column>
          <el-table-column width="100px" label="订单总数" prop="orderCount" align="center"></el-table-column>
          <el-table-column width="120px" label="待发货订单数" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.waitDeliveryCount}}</span>
              <br>
              <span>已打印&nbsp;{{scope.row.printCount}}</span>
              <br>
              <span>未打印&nbsp;{{scope.row.unPrintCount}}</span>
            </template>
          </el-table-column>
          <el-table-column width="160px" label="创建日期" prop="createTime" align="center"></el-table-column>
          <el-table-column width="180px" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="doManage(scope.row)">管理</el-button>
              <el-button type="text" @click="doDelete(scope.row)">解除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="searchListQuery.currentPage"
                       :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { pagePrintBatch, deleteById, batchDeleteByIds } from '@/api/goods/orderPrintBatch'

  export default {
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      }
    },
    data() {
      return {
        searchListQuery: {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10,
          printBatchName: '',
          startDate: '',
          endDate: '',
          onlyShowUnPrint: false
        },
        timeValue: [],
        total: null,
        listLoading: false,
        dataList: [],
        // 勾选行
        pageSelection: []
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.resetSearch()
        }
      }
    },
    // 初始化页面
    created() {
      this.initList()
    },
    filters: {
    },
    mounted() {
    },
    methods: {
      // 获取商品列表
      initList() {
        this.listLoading = true
        this.searchListQuery.asc = 'createTime'
        this.searchListQuery.startDate = (this.timeValue && this.timeValue.length > 0) ? this.timeValue[0] : ''
        this.searchListQuery.endDate = (this.timeValue && this.timeValue.length > 1) ? this.timeValue[1] : ''
        pagePrintBatch(this.searchListQuery).then(response => {
          this.total = response.data.total
          this.dataList = response.data.records
          this.listLoading = false
        })
      },
      // 查询事件
      handleSearch() {
        this.initList()
      },
      // 重置事件
      resetSearch() {
        this.searchListQuery = {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10,
          printBatchName: '',
          timeValue: [],
          startDate: '',
          endDate: '',
          onlyShowUnPrint: false
        }
        this.initList()
      },
      // 批量解除批次事件
      doBatchDelete() {
        if (this.pageSelection.length === 0) {
          this.$message({ message: '请勾选批次', type: 'warning' })
          return
        }
        this.$confirm('解除批次会将订单从批次中释放出来，并删除批次，但不会删除订单，确定要解除？', '提示', {
          confirmButtonText: '确定解除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          const ids = this.pageSelection[this.searchListQuery.currentPage]
          batchDeleteByIds({ printBatchIds: ids }).then(response => {
            if (response.isError) return
            this.$message({ type: 'success', message: '删除成功!' })
            this.initList()
          })
        }).catch(() => {
        })
      },
      // 管理事件
      doManage(row) {
        this.$emit('toLinkPrint', row.printBatchId)
      },
      // 解除事件
      doDelete(row) {
        this.$confirm('解除批次会将订单从批次中释放出来，并删除批次，但不会删除订单，确定要解除？', '提示', {
          confirmButtonText: '确定解除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          deleteById({ printBatchId: row.printBatchId }).then(response => {
            if (response.isError) return
            this.$message({ type: 'success', message: '删除成功!' })
            this.initList()
          })
        }).catch(() => {
        })
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initList()
      },
      // 勾选
      handleSelectionChange(items) {
        if (items.length === 0) {
          this.pageSelection[this.searchListQuery.currentPage] = []
        } else {
          this.pageSelection[this.searchListQuery.currentPage] = items.map(item => item.printBatchId)
        }
      }
    }
  }
</script>

<style lang="less" scoped>
</style>